<template>
  <div class="mine">
    <myhead title="个人中心" :back="true" ></myhead>
    <div class="mine-top">
        <div class="mine-info">
           <img :src="require('@/assets/images/photo.png')" alt="" class="avatar">
           <div v-if="userInfo">
              {{userInfo.username}} / {{userInfo.phone}}
           </div>
           <div v-else  @click="gotowhere('login')">
              立即登录
           </div>
        </div>
    </div>
    <ul class="tabs">
        <li class="tab-item">
          <img src="" alt="">
          <span>电影订单</span>
        </li>
        <li class="tab-item">
          <img src="" alt="">
          <span>商品订单</span>
        </li>
    </ul>
    <div class="lists">
        <van-cell-group>
            <van-cell icon="phone-o" title="联系我们" is-link />
            <van-cell icon="like-o"  title="红包" is-link value="20" />
            <van-cell icon="star-o" title="优惠券" is-link  value="10" />
            <template v-if="userInfo" >
                <van-cell title="历史记录" icon="user-o" value="查看" is-link />
                <van-cell title="余额" icon="gold-coin" value="288" is-link />
                <van-cell title="点赞" icon="star-o" value="4" is-link />
                <van-cell title="收藏" icon="like-o" value="10" is-link  />
                 <van-cell icon="setting-o" title="个人信息" is-link  />
                <van-cell title="修改密码" :to="{name:'changepass'}" icon="apps-o"  is-link />
            </template>
             <van-cell icon="gem-o" title="设置" is-link  />
             <van-cell icon="fire-o" @click="clearCache" title="清除缓存" is-link  />
        </van-cell-group>
        <div class="out" v-if="userInfo">
          <van-button class="logout" @click="logout" block>退出登录</van-button>
        </div>
    </div>
    
    <van-overlay :show="show">
        <div class="mask">
            <div class="mask-box">
                  <van-progress :pivot-text="percentage+'%'"  :percentage="percentage" stroke-width="10" />
            </div>
        </div>
    </van-overlay>
  </div>
</template>


<script>
var timer = null;
export default {
    data(){
      return {
        show:false,
        percentage:0
      }
    },
    destroyed(){
      clearInterval(timer);
      timer = null;
    },
    methods:{
      logout(){
        this.changeUserInfo(null);
        this.$toast("退出登录成功")
      },
      clearCache(){
        this.show = true;
        timer = setInterval(()=>{
            if(this.percentage<100){
              this.percentage++
            }else{
              clearInterval(timer);
              timer = null;
              this.show = false;
              this.$toast("缓存清除成功...")
              this.percentage = 0;
            }
        },50); 
      }
    }
}
</script>

<style lang="scss">
.mask{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask-box{
    width:90%;
    height:200px;
    background: #fff;
    border-radius: 10px;
    padding:90px 10px 0 10px;

  }
}
.mine{
  background: hsl(0, 0%, 98%);
  &-top{
      text-align: center;
      margin-top: -44px;
      height: 200px;
      padding-left: 22px;
      padding-top: 64px;
      background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
      background-size: cover;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #fff;
      .mine-info{
        display: flex;
        align-items: center;
        font-size:16px;
      }
      .avatar{
        width:70px;
        height:70px;
        border-radius: 50%;
        margin-right:15px;
      }
  }
  .tabs{
    height:90px;
    width:100%;
    display: flex;
    background: #fff;
    .tab-item{
      flex:1;
      height:90px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      img{
        width:26px;
        height:26px;
      }
      span{
        margin-top:10px;

      }
    }
  }

  .lists{
    margin-top:15px;
    background: #fff;
    padding-bottom:50px;
    overflow: auto;
    .out{
      width:100%;
      padding:5px 20px;
    }
  }
}
</style>

